<template>
  <div>
    <div class="product_hide">
      <img class="product_img" src="../../../public/img/footer/2018-12-10_161028.png">
      <p>您的购物车没有商品哦!</p>
      <router-link to class="product_index">去首页逛逛吧</router-link>
    </div>
    <div class="product_recommend">为你推荐</div>
    <herbalshopping-box :productsPublic="recommended"></herbalshopping-box>
  </div>
</template>
<script>
import herbalshopping from "../shopping/herbalshopping/herbalshopping.vue";
export default {
  components: {
    HerbalshoppingBox: herbalshopping
  },
  data() {
    return {
      shoppingCart: [],
      recommended: []
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:8080/abc").then(data => {
        this.recommended = data.data.recommended;
      });
    }
  }
};
</script>

<style scoped>
div.product_hide {
  text-align: center;
  margin-bottom: 20px;
}
div.product_hide p {
  margin-top: 20px;
  margin-bottom: 20px;
}
.product_index {
  color: #e52727;
  text-align: center;
  border: 1px solid #e52727;
  border-radius: 10px;
  margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
div.product_recommend{
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: center;
}
</style>
